<template>
	<view class="text-gray11">
		<view class="bg-gray" :style="{ height:statusBarHeight + 'px', width: screenWidth + 'px' }"></view>
		<scroll-view :style="bodyStyle" scroll-y @scroll="scroll" :scroll-top="topValue" @touchmove.stop @scrolltolower="nextPage">
			<slot name="content"></slot>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue"
import { onLoad, onUnload } from "@dcloudio/uni-app"
import { useMenusStore } from "@/store"

const menusStore = useMenusStore()

const emit = defineEmits(["scrolltolower"]);
const props = defineProps({
    keyboardChange: {
        type: Boolean,
        default: true
    },
    name: {
        type: String,
        default: undefined
    },
})
const windowInfo = uni.getWindowInfo()
const safeAreaInsetsBottom = windowInfo.safeAreaInsets.bottom 
const statusBarHeight = windowInfo.statusBarHeight
const screenHeight = windowInfo.screenHeight
const screenWidth = windowInfo.screenWidth

const systemInfo = uni.getSystemInfoSync()
const bottomHeight = systemInfo.windowBottom 

// 页面滚动的位置
const topValue = ref()

// 内容高度
const bodyHeight = screenHeight - statusBarHeight  - safeAreaInsetsBottom - bottomHeight

// 内容区样式
const bodyStyle = reactive<any>({
	height: bodyHeight + 'px',
	maxHeight: "2048px",
	width: screenWidth + 'px',
	position: 'fixed',
	top: statusBarHeight + "px",
	left: "0px",
})

// 下一页
function nextPage(){
    emit("scrolltolower");
}

// 记录滚动的位置
function scroll(e: any){
    if(props.name){
        menusStore.setScrollerId(props.name, e.detail.scrollTop)  
    }
}

//  #ifndef H5
onLoad(()=>{
    uni.onKeyboardHeightChange(onKeyboardHeightChange);
}) 


onUnload(()=>{
    uni.offKeyboardHeightChange(onKeyboardHeightChange);
}) 

function onKeyboardHeightChange(res: any){
    if(props.keyboardChange){
        const { height, duration } = res;
        if (height > 0) { // 键盘弹起
            uni.hideTabBar({ animation:true })
        }else {  // 键盘收回
              uni.showTabBar({ animation:true })
        }
    }
}
// #endif 

onMounted(()=>{
    // 回到原先滑动的位置
    if(props.name){
        topValue.value = menusStore.getScrollerId((props.name))
    }
})
</script>
